<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              placeholder="请输入内容进行搜索"
              v-model="queryInfo.query"
              @clear="getOrderList"
              clearable
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getOrderList"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click="exportData">导出表格</el-button>
          </el-col>
        </el-row>
        <!-- 订单列表数据 -->
        <el-table :data="orderList" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="订单编号" prop="order_number"></el-table-column>
          <el-table-column label="订单价格" prop="order_price"></el-table-column>
          <el-table-column label="是否付款" prop="pay_status">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.pay_status !== '1'"
                >未付款</el-tag
              >
              <el-tag type="success" v-else>已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否发货" prop="is_send"></el-table-column>
          <el-table-column label="下单时间" prop="create_time">
            <template slot-scope="scope">
              {{ (scope.row.create_time * 1000) | FormatData }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                @click="addressDialogVisible = true"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-location"
                size="small"
                @click="showProgress"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <!-- 修改地址的对话框 -->
      <el-dialog
        title="修改地址"
        :visible.sync="addressDialogVisible"
        width="40%"
        @close="addressDialogClosed"
      >
        <el-form
          :model="addressForm"
          :rules="addressFormRules"
          ref="addressFormRef"
          label-width="100px"
        >
          <el-form-item label="省市区/县" prop="address1">
            <el-cascader
              expand-trigger="hover"
              :options="cityData"
              v-model="addressForm.address1"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address2">
            <el-input v-model="addressForm.address2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="addressDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editAddress">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 展示物流进度的对话框 -->
      <el-dialog title="提示" :visible.sync="showProgressVisible" width="40%">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in progressInfo"
            :key="index"
            :timestamp="activity.time"
          >
            {{ activity.context }}
          </el-timeline-item>npm
        </el-timeline>
      </el-dialog>
    </div>
  </template>

  <script>
  import cityData from "./citydata";
  import wuliu from "./kuaidi.json";
  import { export2Excel } from '../../common/js/util';
  export default {
    data() {
      return {
        queryInfo: {
          query: "",
          pagenum: 1,
          pagesize: 10,
        },
        orderList: [],
        total: 0,
        addressDialogVisible: false,
        addressForm: {
          address1: [],
          address2: "",
        },
        addressFormRules: {
          address1: [
            {
              required: true,
              message: "请选择省市区县",
              trigger: "blur",
            },
          ],
          address2: [
            {
              required: true,
              message: "请填写详细地址",
              trigger: "blur",
            },
          ],
        },
        cityData,
        showProgressVisible: false,
        progressInfo: {},
        columns: [
        { title: "订单编号", key: "order_number" },
        { title: "订单价格", key: "order_price" },
        { title: "是否支付", key: "pay_status" },
        { title: "是否发货", key: "is_send" },
        { title: "下单时间", key: "create_time" },
        ]
      };
    },
    methods: {
      async getOrderList() {
        const { data: res } = await this.$http.get("orders", {
          params: this.queryInfo,
        });
        if (res.meta.status !== 200) {
          return this.$message.error("获取订单列表失败！！");
        }
        this.total = res.data.total;
        this.orderList = res.data.goods;
      },
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize;
        this.getOrderList();
      },
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
        this.getOrderList();
      },
      addressDialogClosed() {
        this.$refs.addressFormRef.resetFields();
      },
      async showProgress() {
        // const { data: res } = await this.$http.get("/kuaidi/1106975712662");
        // if (res.meta.status !== 200)
        //   return this.$message.error("获取物流信息失败！！");
        this.progressInfo = wuliu.data;
        this.showProgressVisible = true;
      },
      editAddress() {
        this.$message.success("修改成功咯~");
        this.addressDialogVisible = false;
        },
      exportData() {
        export2Excel(this.columns, this.orderList, '订单列表')
      },
    },
    created() {
      this.getOrderList();
    },
  };
  </script>

  <style lang="less" scoped>
    .el-table{
    margin:20px 0;
}

.el-breadcrumb{
    font-size: 14px;
}
  </style>

